<!--
 * @Author: your name
 * @Date: 2022-04-20 11:08:40
 * @LastEditTime: 2022-05-13 15:36:47
 * @LastEditors: gong.jiuhui you@example.com
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jk_one-stop_cloud_mobile_v1.0\src\views\apply\chooseCgtag.vue
-->
<template>
  <div class="choose-content" :style="{top: GLOBAL.currentEnvironment ? '0.2rem' : '0.6rem'}">
    <Navbar appTitle="选择采购商品" @clickLeft="clickLeft" :isGoHistory="false" />
    <!-- <van-nav-bar left-text="返回" title="选择采购商品" left-arrow fixed placeholder @click-left="clickLeft" /> -->

    <div class="bb" :style="{height: GLOBAL.currentEnvironment ? '0.9rem' : '0.5rem'}"></div>
    <div class="search2" :style="{top: GLOBAL.currentEnvironment ? '0.1rem' : '0.5rem'}">
      <Search ref="topSearch" placeholder="商品名称|商品编号" :isAdd="false" :isScreen="false" :isType="true" @onSearch="onSearch"></Search>
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item @change="dropDownChang" v-model="dropdownObj.type" :options="goodsTypeList" />
        <van-dropdown-item ref="item" :title="prodcname">
          <van-tree-select @click-item="selectChange" v-model="dropdownObj.category" :active-id.sync="activeId" :main-active-index.sync="activeIndexId"
            :items="goodsCatagoryList" />

        </van-dropdown-item>
      </van-dropdown-menu>
    </div>
    <pageList  class="pageList" 
    ref="pageList" :checkedShow="checkedShow" :columns="columns" :listUrl="listUrl" @getCheckedValue="getCheckedValue" @handleList="handleList">
    </pageList>
  </div>
</template>

<script>
import Navbar from "@/components/navBar/navBar_right";
import ContactPickers from "@/components/choiceuse/ContactPickers";
import upload from "@/components/upload/upload";
import moment from "moment";
import Search from "@/components/search";
import pageList from "@/components/pageList";
import { getDictModel, categoryGetTree } from "@/api/system.js";
export default {
  props: {
    //父子组件需要传递的值
    contractId: {
      type: String,
      default: "",
    },
  },
  name: "search",
  components: { Navbar, ContactPickers, upload, Search, pageList },
  data() {
    return {
      prodcname: "物品分类",
      dopdownItem: null,
      activeId: 1,
      activeIndexId: "",
      keywords: "",
      checkedShow: false,
      goodsTypeList: [{ text: "物品类型", value: "" }],
      goodsCatagoryList: [],
      dropdownObj: {
        type: "",
        category: "",
      },

      listUrl: "/wms/goods/getAllGoodsBaseInfo", //列表接口
      columns: {
        titleKey: "goodsName", //标题
        // subtitleKey: "description",//副标题
        content: [
          //内容
          {
            name: "物品编号",
            key: ["goodsCode"],
            // style: "color:red",
          },
          {
            name: "分类",
            key: ["categoryText"],
          },
        ],
        labelKey: ["typeText", "spec"], //标签
        labelText: {
          typeText: "物品类型：",
          spec: "商品规格：",
        },
      },
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.initData();
  },
  methods: {
    selectChange(item) {
      console.log(item);
      if (this.dropdownObj.category == item.id) {
        this.dropdownObj.category = "";
        this.activeId = "";
        this.prodcname = "物品分类";
      } else {
        this.dropdownObj.category = item.id;
        this.prodcname = item.text;
      }

      this.searchQuery();
      this.$refs.item.toggle();
    },
    initData() {
      getDictModel({ dictCode: "wms_goods_type" }).then((res) => {
        this.goodsTypeList = [...this.goodsTypeList, ...res.result];
      });
      categoryGetTree({ code: "B05" }).then((res) => {
        this.goodsCatagoryList = res.result[0].children;
        this.cloneTree(this.goodsCatagoryList);
      });
    },
    //遍历树
    cloneTree(list) {
      console.log("+++++++++++++++++++++++++");
      console.log(list);
      list.forEach((item) => {
        item.text = item.name;
        if (item.children.length != 0) {
          this.cloneTree(item.children);
        }
      });
    },
    clickLeft() {
      this.$emit("cancelTag");
    },
    dropDownChang() {
      this.searchQuery();
    },
    //列表点击事件
    onSearch(v) {
      this.keywords = v;
      console.log(this.keywords);
      this.searchQuery();
    },
    // 搜索
    searchQuery(v) {
      // 搜索条件
      let queryParam = {
        keyword: this.keywords,
        ...this.dropdownObj,
      };
      this.$refs.pageList.searchQuery(queryParam);
    },
    handleList(id, item, type) {
      this.$emit("chooseTag", item);
      // console.log(id, item, type, "id:列表id,item:列表对象,type:事件名");
    },
    // 加载列表
    getList() {
      console.log("pppppppppppppppp");
      // 传1代表从第一条数据开始
      this.$refs.pageList.onLoad(1);
    },
    // 重置
    searchReset() {
      this.$refs.pageList.searchReset();
    },
    // 获取选择的列表数据
    getCheckedValue(ids, item) {
      console.log(ids, item);
    },
    cancel() {
      this.fzrName = "";
      this.createdByName = "";
      this.params = Object.assign({}, formP);
      this.$emit("chooseTag");

      // this.$router.push({ path: '/approval', query: {approveType:1,taskId:"4555"} })
    },
    confirm() {
      // this.$router.push({ path: "/carRoomList" });
      this.$emit("getCategory", this.params);
    },
  },
};
</script>
<style lang="scss" scoped>
.choose-content {
  padding-bottom: 0.5rem;
  position: fixed;
  top: 0.2rem;
  width: 100%;
  height: 100vh;
  overflow-y: scroll;
  background: rgb(245, 245, 245);
  // background:red;
  z-index: 99;
  //  border: 1px solid red;

  .bb {
    height: 0.8rem;
    // border: 1px solid red;
  }
  .search2 {
    width: 100%;
    position: fixed;
    top: 0.4rem;
    z-index: 10;
    // border: 1px solid red;
  }
  .formgroup {
    background: #ffffff;
    // padding: 0 0.16rem;
    margin-bottom: 0.2rem;
    padding-top: 0.1rem;

    .title {
      width: 0.58rem;
      height: 0.14rem;
      font-size: 0.15rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: #191f25;
      line-height: 0.05rem;
      margin-left: 0.16rem;
    }
  }
  .search-bottom {
    height: 0.5rem;
    width: 100%;
    background: #ffffff;
    // background: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    bottom: 0px;
    padding: 0.11rem;
    .btnconfirm {
      width: 1.72rem;
      height: 0.39rem;
      background: #1890ff;
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
    }
    .btncancel {
      width: 1.72rem;
      height: 0.39rem;
      background: #f6f6f6;
      border: 0.01px solid rgba(25, 31, 37, 0.12);
      border-radius: 0rem;
      text-align: center;
      line-height: 0.39rem;
    }
  }
  .rt-column {
    padding: 0.17rem 0 0 0.17rem;
    //  border: 1px solid red;
  }
  .rt-row {
    display: flex;
    justify-content: space-between;

    margin-bottom: 0.17rem;
    .column {
      //  border: 1px solid red;
      width: 1.5rem;
      .column-t {
        font-size: 0.14rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #888888;
        display: block;
        width: 100%;
        margin-bottom: 0.03rem;
      }
      .column-c {
        font-size: 0.16rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: #191f25;
        display: block;
        width: 100%;
      }
    }
  }
}
</style>